<script setup>
    import { ref, reactive } from 'vue'
    import { Plus } from "@element-plus/icons-vue"; // 引入 icon 
    import { useStore } from 'vuex' 
    import { useRoute, useRouter } from 'vue-router'

    const store = useStore()    // vuex
    const router = useRouter()  // 路由
    // 表格
    const tableData = [{}]
    // 抽屉
    const drawer = ref(false)
    function cancelClick() {  // 默认为关闭
        drawer.value = false
    }

       
    let formSize = ref('')
    // 表单
    let form = reactive({
        studentName: '',   // 学员姓名
        studentParTel: '',  // 家长电话
        lessionArea: [],   // 校区
        lessionGrade: [],  // 年纪
        lessionSubject: [], // 学科
        studentSource: '',   // 来源
        businsTeacher: '',  // 业务老师
        status: '',
        member: '',
        studentSex: '',  // 性别
        studentBir: '',  // 生日
        studentAva: '',  // 头像
    })
    // 校验
    const rules = reactive({
         studentName: [
            {
                required: true,
                message: '请输入学员姓名',
                trigger: 'blur',
            }
        ],
        studentParTel: [
            {
                required: true,
                message: '请输入家长联系方式',
                trigger: 'blur',
            }
        ],
        lessionArea: [
            {
                required: true,
                message: '请选择校区',
                trigger: 'change',
            },
        ],
        lessionGrade: [
            {
                required: true,
                message: '请选择年级',
                trigger: 'change',
            },
        ],
        lessionSubject: [
            {
                required: true,
                message: '请选择学科',
                trigger: 'change',
            }
        ],
        studentSource: [
            {
                required: true,
                message: '请选择来源',
                trigger: 'change',
            },
        ],
    })

    // 确定
    const submitForm = function(formRef){
        console.log(form)
    }
    // 新增
    const onAdd = function(){
        drawer.value = !drawer.value
    } 
    // 编辑 
    const handleEdit = function(){
        drawer.value = !drawer.value
    }
    // 查看
    const onLook = function(){
        // router.push({ path: '/xiangqing' })
    }
    // 图片上传之前
    const beforeAvatarUpload = function(){

    }
    // 图片上传成功
    const handleAvatarSuccess = function(){

    }
</script>

<template>
    <div class="xueyuan">
    <!-- 按钮 -->
    <el-row class="mb-4">
        <el-button type="primary" @click="onAdd">新增学员</el-button>
        <el-button type="primary" plain>群发短信</el-button>
        <el-button type="primary" plain>群发站内信</el-button>
        <el-button type="primary" plain>App 推送</el-button>
        <el-button type="primary" plain>赠送优惠券</el-button>
    </el-row>
    <!-- 表格 -->
    <el-table border class="table" :data="tableData" style="width: 100%">
        <el-table-column fixed prop="date" type="selection" width="55" />
        <el-table-column prop="user" label="用户ID" width="150" />
        <el-table-column prop="studentName" label="学员姓名" width="200" />
        <el-table-column prop="studentParTel" label="家长联系方式" width="200" />
        <el-table-column prop="lessionArea" label="校区" width="120" />
        <el-table-column prop="lessionGrade" label="年级" width="120" />
        <el-table-column prop="lessionSubject" label="学科" width="120" />
        <el-table-column prop="studentSource" label="来源" width="120" />
        <el-table-column prop="businsTeacher" label="业务老师" width="180" />
        <el-table-column prop="accountState" label="账户启用状态" width="200" />
        <el-table-column prop="vipStudent" label="是否为新会员" width="200" />
        <el-table-column fixed="right" label="操作" width="200">
            <template #default>
                <el-button type="text" size="small" @click="onLook">查看</el-button>
                <el-button type="text" size="small" @click="handleEdit">编辑</el-button>
                <el-button type="text" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
        :page-sizes="[100, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
    >
    </el-pagination>
    <!-- 抽屉 -->
    <el-drawer v-model="drawer" title="新增学员" size="30%">
        <!-- 表单 -->
        <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
        >
            <el-form-item label="学员姓名" prop="studentName">
                <el-input v-model="form.studentName" placeholder="请输入学员姓名"></el-input>
            </el-form-item>

            <el-form-item label="家长联系方式" prop="studentParTel">
                <el-input v-model="form.studentParTel" placeholder="请输入家长联系方式"></el-input>
            </el-form-item>

            <el-form-item label="性别">
                <el-radio-group v-model="form.studentSex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="生日">
                <el-date-picker
                    v-model="form.studentBir"
                    type="date"
                    placeholder="请选择生日"
                    style="width: 80%"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item label="头像">
                <el-upload 
                    list-type="picture-card"
                    v-model="form.studentAva" 
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                >
                    <el-icon class="icon"><plus /></el-icon>
                </el-upload>
            </el-form-item>
                    <span class="icon-span">建议尺寸120*90像素 ,大小不要超过1M</span>  
    
            <el-form-item label="校区" prop="lessionArea">
                <el-select v-model="form.lessionArea" placeholder="请选择校区">
                    <el-option label="海淀区" value="海淀区"></el-option>
                    <el-option label="西城区" value="西城区"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="年级" prop="lessionGrade">
                <el-select v-model="form.lessionGrade" placeholder="请选择校区">
                    <el-option label="小学一年级" value="小学一年级"></el-option>
                    <el-option label="小学二年级" value="小学二年级"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="学科" prop="lessionSubject">
                <el-select v-model="form.lessionSubject" placeholder="请选择校区">
                    <el-option label="不限" value="不限"></el-option>
                    <el-option label="数学" value="数学"></el-option>
                </el-select>
            </el-form-item>

             <el-form-item label="来源" prop="studentSource">
                <el-radio-group v-model="form.studentSource">
                    <el-radio label="App"></el-radio>
                    <el-radio label="线下"></el-radio>
                </el-radio-group>
            </el-form-item>

             <el-form-item label="业务老师" prop="businsTeacher">
                <el-input v-model="form.businsTeacher" placeholder="请输入业务老师"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(formRef)">确定</el-button>
                <el-button @click="drawer = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
    </div>
</template>

<style scoped>
.xueyuan {
    padding: 10px;
}
.table {
    margin: 15px 0 15px 0;
}
.icon-span {
    display: block;
    text-align: center;
    position: relative;
    bottom: 15px;
}

</style>